<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>watch</title>
	<!-- <script type="text/javascript" src="https://unpkg.com/vue@3.0.0-beta.17/dist/vue.global.js"></script>
	<style> -->
		
	<script src="vue.beta.js"></script>
	</style>
</head>

<body>
	<div id="app">
    <input v-model="firstName" type="text">
    <input v-model="lastName" type="text">
    <div>{{firstName + "--------" + lastName}}</div>
    <div>{{fullName}}</div>
	</div>
</body>
<script>
	const {
		createApp,
		ref,
    reactive,
    watch
	} = Vue
  
  const firstName = ref("");
  const lastName = ref("");
  let fullName = ref("")

	const app = {
		setup() { //他是一个函数，函数的入口。组合很多的组件
			
      // watch(() => {
      //   console.log(firstName.value)
      // })
      watch(firstName, (newVal, oldVal)=> {
        fullName.value = firstName.value + lastName.value
      })

      watch(lastName, (newVal, oldVal)=> {
        fullName.value = firstName.value + lastName.value
      })

			return {
        firstName,
        lastName,
        fullName
			}
		}
  }
  
  //在数据被改变的时候，进行相应的逻辑，需要个函数，需要watch 钩子函数

	createApp(app).mount("#app")


	// optionAPI
	// const vm = new Vue({
	// 	el: "#app",
	// 	data: {
	// 		message
	// 	},
	// 	templte: {}
	// });
</script>

</html>